<template>
    <div class="_section">
      <el-row>
        <el-col :span="24">
          <div class="container plat-data-container">
            <!-- <el-row>
                <el-col :span="24">
                  <div class="first-title">
                    交易数据
                  </div>
                </el-col>
              </el-row> -->
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="data-container flexBox marginBox">
                    <div class="data-title second-title text-center" style="margin-top: 0;">
                      <i class="my-icon icon-jiaoyi1" style="height: 26px;" />充值总额(元)
                    </div>
                    <div class="data-val text-center">
                      <count-to :start-val="0" :end-val="paidAmountSum" :duration="2600" class="card-panel-num" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="data-container flexBox marginBox">
                    <div class="data-title second-title text-center" style="margin-top: 0;">
                      <i class="my-icon icon-jiaoyi2" style="height: 26px;" />运费交易总额(元)
                    </div>
                    <div class="data-val text-center">
                      <count-to :start-val="0" :end-val="allFeeSum" :duration="2600" class="card-panel-num" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="data-container flexBox">
                    <div class="data-title second-title text-center" style="margin-top: 0;">
                      <i class="my-icon icon-jiaoyi3" style="height: 26px;" />司机放款总额(元)
                    </div>
                    <div class="data-val text-center">
                      <count-to :start-val="0" :end-val="deliveryCashFee" :duration="2600" class="card-panel-num" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="data-container flexBox">
                    <div class="data-title second-title text-center" style="margin-top: 0;">
                      <i class="my-icon icon-jiaoyi4" style="height: 26px;" />开发票总额(元)
                    </div>
                    <div class="data-val text-center">
                      <count-to :start-val="0" :end-val="invoiceFeeSum" :duration="2600" class="card-panel-num" />
                    </div>
                  </div>
                </el-col>
              </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>

  <script>
    import CountTo from 'vue-count-to'
    import {getFeeStatistics} from "@/api/statistics";
    export default {
      data() {
        return {
          allFeeSum:0,
          invoiceFeeSum:0,
          paidAmountSum:0,
          deliveryCashFee:0,
          verifycodeCount:0,
        }
      },
      components: {
        CountTo
      },
      mounted() {
        getFeeStatistics({isShipper:1}).then(response => {
          let data =  response.data;
          this.allFeeSum = data.allFeeSum?data.allFeeSum:0; //运费交易总额（元）
          this.invoiceFeeSum = data.invoiceFeeSum?data.invoiceFeeSum:0; //开发票总额（元）
          this.paidAmountSum = data.paidAmountSum?data.paidAmountSum:0; //充值总额（元）
          this.deliveryCashFee = data.deliveryCashFee?data.deliveryCashFee:0; //司机放款总额（元）
          this.verifycodeCount = data.verifycodeCount?data.verifycodeCount:0; //短信消费总计(条）
        })
      },
    }
  </script>

  <style lang="scss" scoped>
    .dashboard-editor-container {
      padding: 32px;
      background-color: rgb(240, 242, 245);
      position: relative;

      .github-corner {
        position: absolute;
        top: 0px;
        border: 0;
        right: 0;
      }

      .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
      }
    }

    @media (max-width:1024px) {
      .chart-wrapper {
        padding: 8px;
      }
    }

    .title {
      font-size: 16px;
    }

    .container {
      border-radius: 4px;
      // margin: 0 20px;
      padding: 4px;
    }

    .tool-button-container {
      .el-col {
        text-align: center;

        button {
          width: 80%;
        }
      }
    }

    .plat-data-container {

      .data-container {
        height: 140px;
        background-color: #fff;
        padding: 10px 24px;
        font-size: 14px;

        .text-center {
          text-align: center;
        }
      }

      .bgpart {
        background: linear-gradient(-20deg, rgba(128, 67, 246, 1), rgba(61, 177, 243, 1));

        .second-title {
          color: #FFFFFF;
          font-size: 15px;
        }

        ._platCar {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .split-line {
            display: inline-block;
            width: 1px;
            height: 3em;
            vertical-align: middle;
            background-color: #f0f2fa;
          }
        }

        .data-val {
          color: #FFFFFF;
          font-size: 30px;
          // font-weight: 600;
        }

        .data-title {
          color: #FFFFFF;
          font-size: 14px;
          margin-top: 0;
        }
      }

      .flexBox {
        position: relative;
        top:-4px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* margin-bottom: 20px; */
      }
      .marginBox{
        margin-bottom: 20px;
      }
      .first-title {
        position: relative;
        padding-left: 14px;
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 8px;
         height: 50px;
        border-bottom: none;

        i {
          margin-right: 8px;
        }
      }

      .first-title::before {
        content: '';
        height: 15px;
        width: 4px;
        background-color: #FF7F21;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .second-title {
        margin-left: 16px;
        overflow: hidden;
        font-size: 14px;
        color: #000000;
        line-height: 32px;
        padding: 10px 0 10px 5px;

        i {
          margin-right: 6px;
        }
      }

      .data-title {
        padding: 5px;
        font-size: 14px;
        color: #78909C;
        display: block;
        margin-top: 10px;
      }

      .data-val {
        font-size: 24px;
        color: #000033;
        display: block;
        font-weight: 200;
        padding: 5px;
      }
    }

    .split-line-container {
      position: relative;

      .split-line {
        display: inline-block;
        width: 1px;
        height: 3em;
        vertical-align: middle;
        position: absolute;
        left: 0;
        background-color: #f0f2fa;
      }
    }

    .nav_bg1 {
      background: #0bb2d4;
    }

    .nav_bg2 {
      background: #ff7f21;
    }

    .nav_bg3 {
      background: #677afa;
    }

    .nav_bg4 {
      background: #11c26d;
    }

    .nav_bg5 {
      background: #f4516c;
    }

    .shuju_nav_list {
      display: block;
      overflow: hidden;
      padding: 0 30px;
      height: 108px;
      width: 80%;
      margin: auto;

      .shuju_i {
        display: block;
        border-radius: 50%;
        margin-top: 20px;
        float: left;
        width: 60px;
        height: 60px;
        border: 5px solid rgba(255, 255, 255, 0.3);

        i {
          display: block;
          border-radius: 50%;
          background: #ffffff;
          height: 100%;

          img {
            display: block;
            height: 75%;
            margin: 0 auto;
            padding-top: 25%;
          }
        }
      }

      .shuju_list_xinxi {
        float: left;
        margin-left: 20px;
        color: #fff;
        line-height: 108px;

        span {
          font-size: 1.2em;
          display: block;
        }
      }
    }

    .el-divider__text {
      background: #f0f2f5;
    }
  </style>
